<template>
	<div class="iManager" @click="noalter">
		<nav-bar class="nav-bar"></nav-bar>
		<div class="content-main">
			<Tabs>
				<Tab-pane label="个人信息管理" icon="card">
					<i-information v-on:tell-me="tellMe"></i-information>
				</Tab-pane>
				<Tab-pane label="资料上传" icon="android-upload">
					<i-data-upload></i-data-upload>
				</Tab-pane>
				<Tab-pane label="资料收集" icon="android-download">
					<i-data-download></i-data-download>
				</Tab-pane>
			</Tabs>
		</div>
		<transition name="fade">
			<div class="alter" v-if="ifalter" @click.stop="showalter">
				<alter :msg="information"></alter>
			</div>
		</transition>
	</div>

</template>

<script>
import navBar from '@/components/navBar.vue'
import iInformation from './iManager/iInformation'
import iDataUpload from './iManager/iDataUpload'
import iDataDownload from './iManager/iDataDownload'
import alter from '@/components/alterInformation'
export default {
	name: 'iManager',

	data () {
		return {
			ifalter: false,
			information:'',
		}
	},
	methods: {
		tellMe(msg){
			this.ifalter=true
			this.information=msg
		},
		noalter(){
			this.ifalter=false
		},
		showalter(){
			this.ifalter=true
		}
	},
	components:{
		navBar,
		iInformation,
		iDataUpload,
		iDataDownload,
		alter
	}
}
</script>

<style lang="css" scoped>
.iManager{
	width: 100%;
	height: 100%
}
.iManager .alter{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 40%;
	width: 60%;
}
</style>